<template>
  <div>
    这是富文本框

    <div id="e"></div>
    <button @click="submit">提交</button>
    <button @click="read">写入</button>
  </div>
</template>

<script>
import E from "wangeditor";
import hljs from "highlight.js";

import IndexService from "@/service/index";
const indexService = new IndexService();
export default {
  mounted() {
    this.initE();
  },
  data() {
    return {
      text: "",
      editor: new E("#e")
    };
  },
  methods: {
    submit() {
      console.log(this.editor.txt.html());
    },
    read() {
      this.editor.txt
        .html(`<h1><strong>封装工具</strong></h1><h2><a></a></h2><h2><a></a>childNodes封装</h2><p><a></a><em>封装理由：</em></p><p><a></a>&nbsp; 因为childNodes获取时会把子元素获取到，也就是会把文本节点、注释节点等获取到不便使用，所以封装。</p><p><img src=""><span class="hljs-keyword" style="background-color: rgb(241, 241, 241);">function</span><span style="background-color: rgb(241, 241, 241);"> </span><span class="hljs-title" style="background-color: rgb(241, 241, 241);">test</span><span class="hljs-params" style="background-color: rgb(241, 241, 241);">()</span><span class="hljs-comment" style="background-color: rgb(241, 241, 241);">{</span><span style="color: rgb(209, 154, 102); background-color: rgb(241, 241, 241);"></span></p><pre type="JavaScript"><code><span class="hljs-function"><span class="hljs-comment">    let a =1;
    var a =2;
}</span>
<span class="hljs-title">test</span><span class="hljs-params">()</span>;</span>

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">test</span><span class="hljs-params">(a)</span><span class="hljs-comment">{
    let a = 10;
    console.log(a);
}</span>
<span class="hljs-title">test</span><span class="hljs-params">()</span>;</span>
</code></pre><p><br></p><p><img alt="" src="https://img-blog.csdnimg.cn/20201117100923162.png"><img src=""></p>`);
    },
    initE() {
      //这里各位小伙伴可以查询官网，根据自己的需求进行菜单栏调整
      this.editor.highlight = hljs;
      this.editor.config.languageType = [
        "JavaScript",
        "Bash",
        "C",
        "C#",
        "C++",
        "CSS",
        "Java",
        "JSON",
        "TypeScript",
        "Plain text",
        "Html",
        "XML",
        "SQL",
        "Go",
        "Kotlin",
        "Lua",
        "Markdown",
        "PHP",
        "Python",
        "Shell Session",
        "Ruby"
      ];

      this.editor.config.uploadImgServer = `http://localhost:3000/essay/upload_image`; // 你的服务器上传地址
      this.editor.config.uploadImgMaxSize = 10 * 1024 * 1024;
      this.editor.config.uploadImgMaxLength = 50;

      this.editor.config.withCredentials = true;

      this.editor.create();
    }
  }
};
</script>

<style>
</style>